<template>
    <div class="topMenu">
        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#8fc5bb"
            active-text-color="#0c5a4a"
            text-color="#fff"
            :ellipsis="false"
            @select="handleSelect">
            <div class="SystemTopic">{{ hospitalMsg.name }}</div>
            <div class="expand">
                <span class="exFold" v-if="!isCollapse" @click="Telescoping"><el-icon><Fold /></el-icon></span>
                <span class="exFold" v-else @click="Telescoping"><el-icon><Expand /></el-icon></span>
            </div>
            <div class="flex-grow" />
            <el-avatar :size="40" style="margin-top: 9px;" :src="userMessage?userMessage.hiconBase64:''" /> 
            <div id="UserName">{{ userMessage?userMessage.name:userMessage.name }}</div>
            <span class="notify" @click="remindMsg"><el-badge :is-dot="isDot" class="item"><el-icon class="notifyIcon"><Bell /></el-icon></el-badge></span>
            <el-sub-menu index="2">
                <template #title>设置</template>
                <el-menu-item index="2-1" @click="MyMessage">我的</el-menu-item>
                <el-menu-item index="2-2" @click="MyCarts">购物车</el-menu-item>
                <el-menu-item index="2-3" @click="outLogin">退出</el-menu-item>
            </el-sub-menu>
        </el-menu>
        <el-dialog
            v-model="dialogVisible"
            title="提醒"
            width="40%">
            <div class="remind_content" style="font-size: 16px;color: #1a0a0a;text-indent: 1em;">
                <el-timeline>
                    <el-timeline-item center  v-for="(item,index) in tableData" :key="index" :timestamp="item.createTime" placement="top">
                        <el-card>
                            <h4>{{ item.title }}</h4>
                            <p>{{ item.content }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
import { getCurrentInstance } from 'vue';
export default defineComponent({
    data(){
        return{
            userMessage:null,
            dialogVisible:false,
            tableData:[],
            isDot:false,
            hospitalMsg:{
                name:"贝妙屋宠物医院管理系统"
            },
            isCollapse:true
        }
    },
    setup() {
        const route = useRouter();
        const store = useStore();
        const proxy = getCurrentInstance();

        return{
            route,
            store,
            proxy
        }
    },
    created () {
        this.userMessage = this.store.state.UserMessage;
        this.loadData();
        this.Loadhospital();
        this.loadRemind();
    },
    methods:{
        loadData(){
            let self = this;
            if(self.userMessage==null) return;
            self.$http.get(`${self.baseUrl}/user/selectUid?id=${self.userMessage.Id}`).then(res=>{
                let d = Object.assign(this.userMessage,res.data);
                self.userMessage = d;
                self.store.dispatch("asyncStoreUser",d);
            })
        },
        Loadhospital(){
            let self = this;
            self.$http.get(`${self.baseUrl}/hospital/selectId?id=1`).then(res=>{
                self.hospitalMsg = res.data;
            })
        },
        loadRemind(){
            let self = this;
            if(self.userMessage==null) return;
            self.$http.get(`${self.baseUrl}/remind/ByUidQuery?uid=${self.userMessage.Id}`).then(res=>{
                if(res.data.length>0){
                    self.tableData = res.data;
                    self.isDot = true;
                }
            })
        },
        remindUpdateRead(){
            let self = this;
            if(self.userMessage==null) return;
            self.$http.get(`${self.baseUrl}/remind/updateReadStatus?uid=${self.userMessage.Id}`).then(res=>{
                if(res.data>0){
                    self.isDot = false;
                }
            })
        },
        remindMsg(){
            let self = this;
            self.dialogVisible = true;
            self.loadRemind();
            if(self.isDot){
                self.remindUpdateRead();
            }
        },
        Telescoping(){
            this.isCollapse = !this.isCollapse;
            this.$emit("getTelescoping",this.isCollapse);
        },
        MyMessage(){
            this.store.commit("BasicUser",this.store.state.UserMessage);
            this.store.commit("basicManage",false);
            this.route.push({
                path:'/userDetail'
            })
        },
        MyCarts(){
            this.route.push({
                path:'/cart'
            })
        },
        outLogin(){
            this.store.commit("UserBind",null);
            this.store.commit("removeToken",null);
            if(this.store.state.UserSocket!=null) this.store.state.UserSocket.close();
            this.route.push({
                path:'/login'
            }) 
        }
    }
})
</script>
<style scoped>
    .expand{
        color: rgb(255, 255, 255);
        font-size: 26px;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-top: 8px;
    }
    .flex-grow {
        flex-grow: 1;
    }
    .SystemTopic{
        font-size: 28px;
        color: #fff;
        line-height: 52px;
        margin-right: 8px;
        margin-left: 12px;
    }
    #UserName{
        color: #fff;
        line-height: 56px;
        margin: 0 12px;
    }
    .notify{
        width: 20px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .notifyIcon{
        color: #fff;
        font-size: 20px;
        transition: all .2s;
    }
    .notify:hover .notifyIcon{
        color:red;
    }
    .el-menu-item:hover{
        background-color: rgb(143 197 187);
    }
</style>
